<template>
    <a-drawer
        :title="title"
        :maskClosable="true"
        :width="drawerWidth"
        placement="right"
        :closeable="true"
        @close="handleCancel"
        :visible="visible"
        style="height: 100%;overflow: auto;padding-bottom: 53px">

        <template slot="title">
            <div style="width: 100%">
                <span>{{title}}</span>
                <span style="display: inline-block;width: calc(100% - 51px);padding-right: 10px;text-align: right">
                    <a-button @click="toggleScreen" icon="appstore" style="height: 20px;width: 20px;border: 0px"></a-button>
                </span>
            </div>
        </template>

        <a-spin :spinning="confirmLoading">
            <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-form-model-item label="用户账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="username">
                    <a-input placeholder="请输入账号" v-model="model.username" :readOnly="!!model.id"/>
                </a-form-model-item>

                <!-- 新增 -->
                <template v-if="!model.id">
                    <a-form-model-item label="登陆密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
                          <a-input type="password" placeholder="请输入登陆密码" v-model="model.password" />
                    </a-form-model-item>

                     <a-form-model-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmpassword">
                          <a-input type="password" placeholder="请重新输入登陆密码" v-model="model.confirmpassword" />
                    </a-form-model-item>
                </template>
                 <a-form-model-item label="用户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
                    <a-input placeholder="请输入用户姓名" v-model="model.realname"/>
                </a-form-model-item>
                 <a-form-model-item label="工号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workNo">
                    <a-input placeholder="请输入工号" v-model="model.workNo"/>
                </a-form-model-item>
                <!-- TODO 职务组件 -->
                <!-- TODO 角色分配组件 -->
                <!-- TODO 部门分配组件 -->
                <!-- TODO 租户分配组件 -->
                <a-form-model-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-radio-group  v-model="model.userIdentity"  @change="identityChange">
                        <a-radio :value="1">普通用户</a-radio>
                        <a-radio :value="2">上级</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <!-- TODO 负责部门 -->
                 <!-- <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
                     <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>
                </a-form-model-item> -->
                  <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-select  v-model="model.sex"  placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">
                        <a-select-option :value="1">男</a-select-option>
                        <a-select-option :value="2">女</a-select-option>
                    </a-select>
                   </a-form-model-item>
                    <a-form-model-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="email">
                         <a-input placeholder="请输入邮箱" v-model="model.email" />
                     </a-form-model-item>
                   <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
                      <a-input placeholder="请输入手机号码" v-model="model.phone" />
                   </a-form-model-item>
                  <a-form-model-item label="座机" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="telephone">
                     <a-input placeholder="请输入座机" v-model="model.telephone" />
                  </a-form-model-item>
            </a-form-model>
        </a-spin>
         <div class="drawer-bootom-button" v-show="!disableSubmit">
            <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
    </a-drawer>
</template>
<script>
export default {
    name: 'UserForm',
    data() {
        return {
            title: '操作',
            drawerWidth: 700,
            confirmLoading: false,
            visible: false,
            // form 表单验证规则
            validatorRules: {},
            model: {},
            // 设置label的宽高
            labelCol: {
                xs: {span: 24},
                sm: {span: 5}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16}
            },
            disableSubmit:false,
        }
    },
    methods: {
        toggleScreen() {},
        handleCancel() {
            this.close();
        },
        identityChange() {},
        // form表单的edit
        edit() {
            // modal框的显示
            this.visible = true;
            this.resetScreenSize();

        },
        handleSubmit() {
            this.close();
        },
        // 关闭窗口的回调
        close() {
            this.$emit('close');
            this.visible = false;
            // 重置form表单
            this.$refs.form.resetFields();
        },
        // 根据屏幕的变化 设置抽屉的尺寸
        resetScreenSize() {
            let screenWidth = document.body.clientWidth;
            if(screenWidth < 500) {
                this.drawerWidth = screenWidth;
            }else {
                this.drawerWidth = 700;
            }
        }
    },
}
</script>
<style lang="less" scoped>
 .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>